<template>
  <el-container class="home-container">
    <!-- 头部 -->
    <el-header id="el-header">
      <div class="leftMenu">
        <img
          width="50"
          height="50"
          src="@/yxdd_qt/icon/nav/jsgh_icon_view_pressed.png"
          style=""
          alt="江苏港航"
        />
        <div class="topTitle">{{ topTitle }}</div>
        <tab class="tabContent"></tab>
      </div>
      <div class="rightMenu">
        <div class="position">
<!--          <img src="@/assets/img/sys/position.png" width="24" height="24" />-->
          <div class="ipAddr">{{ ip }}</div>
        </div>
        <el-badge :value="12" class="message">
          <i class="el-icon-message-solid"  @click="messageModal"></i>
        </el-badge>
        <img src="@/assets/img/sys/fullscreen.png" v-if="!isFullscreenIcon" @click="enterFullscreen" width="27" height="25" />
        <img src="@/assets/img/sys/fullscreen-exit.png" v-else @click="enterFullscreen" width="27" height="25" />
        <el-dropdown class="avatar-container" trigger="click">
          <div class="avatar-wrapper">
            <img src="@/assets/img/sys/avatar.png" width="36" height="36" />
            <span class="username">{{ name }}</span>
            <i class="el-icon-arrow-down" />
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="toUserCenter">个人中心</el-dropdown-item>
            <el-dropdown-item divided @click.native="logout">
              <span>退出登录</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>
    <el-container>
      <div class="welcome">
        <div class="png"></div>
        <div class="welcomeTitle">
<!--          <div class="firstTitle">WELCOME<i class="el-icon-d-arrow-right"></i></div>-->
          <div class="firstTitle">WELCOME</div>
          <div class="smallTitle">欢迎进入运行调度与监测系统</div>
        </div>
      </div>

    </el-container>
    <UserCenter
      v-if="dialogVisibleForUserCenter"
      :visible.sync="dialogVisibleForUserCenter"
    >
    </UserCenter>
    <message-modal v-if="messageVisable" :dialogVisible="messageVisable" @closeDialog="closeDialog"></message-modal>
    <div class="bottom-title">
      &copy;版权所有：江苏省交通运输厅港航事业发展中心 技术支持：南京洛普股份有限公司
    </div>
  </el-container>
</template>

<script>
// 导入组件
import { mapGetters } from 'vuex'
import tab from '@/layout/components/tab/tab'
import { getToken } from '@/utils/auth'
import ResizeMixin from '@/layout/components/mixin/ResizeHandler'
import UserCenter from "@/layout/components/userCenter/UserCenter";
// import Screenfull from '@/components/Screenfull'
// import {getUserIP}  from '@/utils/ip'
import messageModal from "@/layout/components/messageModal/index.vue";
export default {
  name: "welcome",
  components: {
    UserCenter,tab,messageModal
  },

  mixins: [ResizeMixin],
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'name',
      'showAside',
      'topbarRouters',
      'sidebarRouters',
      'loginUserInfo'
    ]),
    // 所有的路由信息
    routers() {
      return this.sidebarRouters;
    },
    childrenMenus() {
      var childrenMenus = [];
      this.routers.map((router) => {
        for (var item in router.children) {
          if (router.children[item].parentPath === undefined) {
            if(router.path === "/") {
              router.children[item].path = "/" + router.children[item].path;
            } else {
              router.children[item].path = router.path + "/" + router.children[item].path;
            }
            router.children[item].parentPath = router.path;
          }
          childrenMenus.push(router.children[item]);
        }
      });
      return childrenMenus;
    },
  },
  data: function () {
    return {
      //add
      dialogVisibleForUserCenter: false,

      topTitle: '运行调度与监测系统',
      to: { path: 'https://www.baidu.com' },
      ip:'',
      isFullscreenIcon:false,
      messageVisable:false
    }
  },
  methods: {
    enterFullscreen() {
      const isFullscreen = document.fullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement ||
        document.msFullscreenElement

      if (!isFullscreen) {
        document.documentElement.requestFullscreen()
        localStorage.setItem("showFullScreen",true);
        this.isFullscreenIcon = true
      } else {
        document.exitFullscreen()
        localStorage.setItem("showFullScreen",false);
        this.isFullscreenIcon = false
      }

    },
    toUserCenter(){
      this.dialogVisibleForUserCenter = true
    },
    messageModal(){
      this.messageVisable = true
    },
    closeDialog() {
      this.messageVisable = false
    },
    // 退出操作
    logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        cancelButtonClass: "btn-custom-cancel",
        type: 'warning'
      })
        .then(() => {
          this.$store.dispatch('user/logout').then(() => {
            this.$router.replace('/login') // 为了重新实例化vue-router对象 避免bug
          })
        })
        .catch(() => {})
    },
    goToSystem(){
      // 跳转到系统内部
      console.log(this.topbarRouters,'打印topbarRouters')
      // 默认展示返回路由菜单的第一个系统
      let firstMenu = this.topbarRouters[0].classification
      debugger
      switch (firstMenu) {
        case 'index':
          this.home()
          break
        case 'czyxdd':
          this.dispatch()
          break
        case 'hwjc':
          this.monitor()
          break
        case 'fxjc':
          this.fxjc()
          break
        case 'xyfgl':
          this.credit()
          break
        case 'gzfw':
          this.gzfw()
          break
        default:
          break
      }
    },
    // 系统管理
    home() {
      let vm = this
      let token = getToken()
      const path = window.location.href
      const iparr = path.split(':')
      vm.$bus.$emit('hiddenSidebarAndBoby', true, null)
      vm.$router.push({
        path: '/routerLink/sysLink',
        query: { url: iparr[0] + ':' + iparr[1] + `:3002?token=${token}`}
      })
    },
    // 运行调度
    dispatch() {
      let vm = this
      let token = getToken()
      const path = window.location.href
      const iparr = path.split(':')
      vm.$bus.$emit('hiddenSidebarAndBoby', true, null)
      vm.$router.push({
        path: '/routerLink/dispatchLink',
        query: { url: iparr[0] + ':' + iparr[1] + `:3005?token=${token}`}
      })
    },
    monitor() {
      let vm = this
      let token = getToken()
      const path = window.location.href
      const iparr = path.split(':')
      vm.$bus.$emit('hiddenSidebarAndBoby', true, null)
      vm.$router.push({
        path: '/routerLink/monitorLink',
        query: { url:iparr[0] + ':' + iparr[1] + `:9004/menu-67?token=${token}` }
      })
    },
    credit() {
      let vm = this
      let token = getToken()
      const path = window.location.href
      const iparr = path.split(':')
      console.log(iparr[0] + ':' + iparr[1] + `:3000?token=${token}`)
      vm.$bus.$emit('hiddenSidebarAndBoby', true, null)
      vm.$router.push({
        path: '/routerLink/creditLink',
        query: { url: iparr[0] + ':' + iparr[1] + `:3000?token=${token}` }
      })
    },
    gzfw() {
      let vm = this
      let token = getToken()
      const path = window.location.href
      debugger
      const iparr = path.split(':')
      // console.log(iparr[0] + ':' + iparr[1] + `:3003?token=${token}`) // old is 3002
      vm.$bus.$emit('hiddenSidebarAndBoby', true, null)
      vm.$router.push({
        path: '/routerLink/gzfwLink',
        query: { url: iparr[0] + ':' + iparr[1] + `:3003?token=${token}` }
      })
    },
    fxjc() {
      let vm = this
      let token = getToken()
      const path = window.location.href
      const iparr = path.split(':')
      vm.$bus.$emit('hiddenSidebarAndBoby', true, null)
      vm.$router.push({
        path: '/routerLink/fxjcLink',
        query: { url: iparr[0] + ':' + iparr[1] + `:3004?token=${token}` }
      })
    },
    getUserIP (onNewIP) { // 获取ip地址
      let recode = {};
      let RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
      if (!RTCPeerConnection) {
        let win = iframe.contentWindow;
        RTCPeerConnection = win.RTCPeerConnection || win.mozRTCPeerConnection || win.webkitRTCPeerConnection;
      }
      //创建实例，生成连接
      let pc = new RTCPeerConnection();
      // 匹配字符串中符合ip地址的字段
      function handleCandidate(candidate) {
        let ip_regexp = /([0-9]{1,3}(\.[0-9]{1,3}){3}|([a-f0-9]{1,4}((:[a-f0-9]{1,4}){7}|:+[a-f0-9]{1,4}){6}))/;
        let ip_isMatch = candidate.match(ip_regexp)[1];
        if (!recode[ip_isMatch]) {
          callback(ip_isMatch);
          recode[ip_isMatch] = true;
        }
      }
      //监听icecandidate事件
      pc.onicecandidate = (ice) => {
        if (ice.candidate) {
          handleCandidate(ice.candidate.candidate);
        }
      };
      //建立一个伪数据的通道
      pc.createDataChannel('');
      pc.createOffer((res) => {
        pc.setLocalDescription(res);
      }, () => {});

      //延迟，让一切都能完成
      setTimeout(() => {
        let lines = pc.localDescription.sdp.split('\n');
        lines.forEach(item => {
          if (item.indexOf('a=candidate:') === 0) {
            handleCandidate(item);
          }
        })
      }, 1000);
    },

  },
  mounted() {
    document.addEventListener('fullscreenchange', this.toggleFullscreenBtn)
    document.addEventListener('mozfullscreenchange', this.toggleFullscreenBtn)
    document.addEventListener('webkitfullscreenchange', this.toggleFullscreenBtn)
    document.addEventListener('MSFullscreenChange', this.toggleFullscreenBtn)
  },
  beforeDestroy() {
    document.removeEventListener('fullscreenchange', this.toggleFullscreenBtn)
    document.removeEventListener('mozfullscreenchange', this.toggleFullscreenBtn)
    document.removeEventListener('webkitfullscreenchange', this.toggleFullscreenBtn)
    document.removeEventListener('MSFullscreenChange', this.toggleFullscreenBtn)
  },
  created(){
    console.log(window.location.hostname);
    this.ip = window.location.hostname
  },

}
</script>

<style scoped lang="scss">
@import 'src/styles/mixin.scss';
.welcome{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  .png{
    width: 1077px;
    height: 505px;
    background: url("~@/assets/img/login/welcome.png") no-repeat;
    background-size: cover;
    overflow: hidden;
  }
  .welcomeTitle{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    //cursor: pointer;
    .firstTitle{
      font-size: 77px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #EF8030;
      line-height: 90px;
    }
    .smallTitle{
      font-size: 36px;
      font-family: Microsoft YaHei-Light, Microsoft YaHei;
      font-weight: 300;
      color: #0A4EAB;
    }
  }
}


#app > .home-container > .el-container {
  overflow: auto;
  height: calc(100% - 76px);
}
.contanierTop {
  background: #ffffff;
}
.contanierMiddle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  min-width: 0;
}
.menuName {
  width: 260px;
  line-height: 50px;
  font-size: 15px;
  padding-left: 20px;
}
.home-container {
  @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;
  background: #f3f4f9;
}

.toggle-button {
  width: 60%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 56px;
  background-color: #f3f5f7;
  font-size: 15px;
  line-height: 24px;
  color: #333;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}

.el-menu {
  //border-right: none !important;
}
.main-div {
  margin: 10px 10px 15px 10px;
  //margin-bottom: 15px;
  background: #ffffff;
  border: 1px solid #DCDEE0;
  border-radius: 4px;
}

.btn {
  /* 鼠标改成手的形状 */
  cursor: pointer;
  margin-left: 25%;
  font-size: 10px;
}
.el-header {
  display: flex;
  justify-content: space-between;
  background-color: #0a4eab;
  padding-left: 14px;
  align-items: center;
  color: #ffffff;
  font-size: 20px;
  width: 100%;
  height: 76px !important;
  font-weight: bold;

  > div {
    display: flex;
    align-items: center;
    height: 100%;
    .topTitle{
      flex-grow: 0;
      flex-shrink: 0;
      width: 210px;
      margin-left: 4px;
      //letter-spacing: 3px;
      font-size: 23px;
    }
  }

  div:nth-child(2) {
    > img {
      margin: 5px;
      cursor: pointer;
    }

    //> span {
    //  font-weight: normal;
    //  margin-right: 0px;
    //  margin-left: 0px;
    //  font-size: 13px;
    //}
  }

  .rightMenu{
    flex-grow: 0;
    flex-shrink: 0;
    //width: 410px;
    .position{
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20px;
      .city{
        margin-left: 4px;
        font-size: 16px;
        font-weight: 400;
        color: #FFFFFF;
      }
      .ipAddr{
        margin-left: 4px;
        background: #346EC0;
        font-size: 16px;
        font-weight: 400;
        color: #FFFFFF;
        padding: 2px 12px;
      }
    }
    .message{
      margin-right: 24px;
      .el-icon-message-solid{
        font-size: 24px;
      }
      ::v-deep .el-badge__content{
        border: none;
      }
    }
    .avatar-container{
      cursor: pointer;
      margin-left: 24px;
      .avatar-wrapper{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .username{
          font-size: 20px;
          font-weight: 400;
          color: #FFFFFF;
          display: inline-block;
          margin-right:10px;
          margin-left: 13px;
        }
        .el-icon-arrow-down{
          color: #ffffff;
        }
      }
    }
  }
  .leftMenu {
    width: calc(100% - 450px);
  }
}

.breadcrumbClass {
  height: 50px;
  ::v-deep{
    .el-breadcrumb__inner a {
      font-size: 16px;
      font-weight: 400;
      color: #333333;
    }
    .el-breadcrumb__separator{
      font-size: 16px;
      font-weight: 400;
      color: #333333;
    }
    .app-breadcrumb.el-breadcrumb{
      font-size: 16px !important;
    }
    .app-breadcrumb.el-breadcrumb .no-redirec{
      font-size: 16px;
      font-weight: 400;
      color: #969799;
    }
  }
}

.el-aside {
  width: 260px;
  overflow-x: hidden;
  //overflow-y:auto ;
  background-color: #ffffff;
  //margin: 10px 0;
  //border-right: none;
}

.hamburger-container {
  padding: 15px 10px !important;
  //margin-left: -35px;
}

.tabContent {
  width: calc(100% - 300px);
  height: 100%;
  margin-left: 23px;
  box-sizing: border-box;
}

.app-main {
  //background-color: #DCDEE0;
  width: 100%;
  height: calc(100% - 76px);
  padding: 10px;
}
::v-deep{
  .el-tabs__nav-next, .el-tabs__nav-prev{
    line-height: 76px;
    font-size: 16px;
    color: #FFFFFF;
  }
}
.bottom-title{
  font-size: 12px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  width: 100%;
  background: #FFFFFF;
  height: 32px;
  line-height: 32px;
  text-align: center;
}

</style>
<style lang='scss'>
.btn-custom-cancel{ float: right; margin-left: 10px; }
</style>

